<template>
  <div class="JNPF-common-layout">
    <div class="JNPF-common-layout-center">
<!--      <div class="titleName">标准计划查询</div>-->
      <el-row class="JNPF-common-search-box">
        <el-form>
          <el-col :span="5">
            <el-form-item label="项目状态">
              <el-select
                v-model="value2"
                value-key="value2"
                multiple
                collapse-tags
                @change="rowStateItem"
                style="margin-left: 20px;"
                placeholder="请选择">
                <el-option
                  v-for="(item,index) in statesXM"
                  :key="item"
                  :label="item"
                  :value="item">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="时间状态">
              <el-select
                v-model="value3"
                value-key="value3"
                collapse-tags
                @change="XDdateItem"
                style="margin-left: 20px;"
                placeholder="请选择">
                <el-option
                  v-for="(item,index) in XDdate"
                  :key="item"
                  :label="item"
                  :value="index">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-input
              placeholder="请输入项目名称"
              style="width: 300px; margin-right: 30px"
              v-model="queryParams.keyWord"
              @keyup.enter.native="getList"
              clearable
            >
            </el-input>
            <el-button type="primary" @click="getList()"> 查询 </el-button>
            <el-button
              type="warning"
              plain
              icon="el-icon-download"
              :loading="exportLoading"
              @click="handleExport"
            >导出</el-button>
            <el-button
              type="warning"
              plain
              :loading="exportLoading"
              @click="talcta"
            >数据来源</el-button>
          </el-col>
        </el-form>
      </el-row>
      <div class="JNPF-common-layout-main JNPF-flex-main">
        <div class="tableContainer">
          <el-table :data="list" :row-style="{height:'56px'}">
            <el-table-column fixed  align="center" prop="id" label="#" width="100">
            </el-table-column>
            <el-table-column
              fixed
              prop="c_PLAN_CODE"
              align="center"
              label="计划号"
            >
              <template slot-scope="scope">
                <a @click="detail(scope.row.ids)">
                  {{ scope.row.c_PLAN_CODE }}
                </a>
              </template>
            </el-table-column>
            <el-table-column prop="c_C_NAME" :show-overflow-tooltip="true" align="center" label="项目名称">
            </el-table-column>
            <el-table-column
              prop="STD_FORM"
              label="制修订"
              align="center"
              class="name-wrapper"
              :formatter="fmtLength"
            >
            </el-table-column>
            <el-table-column prop="SEND_DATE" align="center" label="计划下达日期">
            </el-table-column>
            <el-table-column prop="CURRENT_LINK" align="center" label="项目状态">
              <template slot-scope="scope">
                <el-popover trigger="hover" placement="top">
                  <p>{{ scope.row.CURRENT_LINK }}</p>
                  <div slot="reference" class="name-wrapper">
                    <el-tag size="medium">{{ scope.row.CURRENT_LINK }}</el-tag>
                  </div>
                </el-popover>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div>
          <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.page"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
            :page-sizes="[10, 20, 30, 40]"
            class="pagination-container"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getTableTwo,crpPoiDownload } from "@/api/monitor/getTableList";
export default {
  name: "index",
  data() {
    return {
      exportLoading: false,
      list: [],
      total: 0,
      queryParams: {
        current: 1,
        size: 10,
        keyWord: "",
        timeFlag: "",
        type: [],
      },
      statesXM: [
        "全部",
        "正在起草",
        "正在征求意见",
        "正在审查",
        "正在批准",
        "已终止",
      ],
      XDdate: [
        "全部",
        "近一月",
        "近三月",
        "近半年",
        "近一年",
        "近两年",
        "近三年",
      ],
      active: 0,
      active1: 0,
        value2:"",
        value3:"",
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    getList() {
      getTableTwo(this.queryParams).then((response) => {
        this.list = response.data;
        this.total = response.total;
        this.$modal.closeLoading();
      });
    },
    handleExport (){
          crpPoiDownload(this.queryParams).then((res) => {
            console.log(res,'res')
            const link = document.createElement('a')
            let blob = new Blob([res], {type: 'application/vnd.ms-excel'})
            link.style.display = 'none'
            link.href = URL.createObjectURL(blob)
            // link.download = res.headers['content-disposition'] //下载后文件名
            // var fileName = localStorage.getItem('disposition')
            link.download = res.fileName || '国家标准计划' //下载的文件名
            document.body.appendChild(link)
            link.click()
            document.body.removeChild(link)
          }).catch(error => {
            console.log(error)
          })
          // this.$modal.confirm("daochu").then(()=>{
          //   this.exportLoading = true;
          //   return poiDownload(this.queryParams)
          // }).then(res=>{
          //      this.$download.name(res);
          //      this.exportLoading = false;
          // })
    },
     talcta(){
       var http = 'https://std.samr.gov.cn/gb/gbProcessInfo';
      //  window.location.href=http;
       window.open(http,'_blank')
    },
    fmtLength(row, column) {
      if (row.STD_FORM == "X") {
        return "修订";
      }
      if (row.STD_FORM == "Z") {
        return "制订";
      }
    },
    detail(data) {
      location.href = "http://std.samr.gov.cn/gb/search/gbDetailed?id=" + data;
    },
    rowStateItem(value) {
        console.log(value);
      // this.active = index;
      // this.queryParams.type = [];
      // if (value == "全部") {
      //   this.queryParams.type = [];
      // } else {
      //   this.queryParams.type.push(item);
      // }
        if(value.includes('全部')){
            this.queryParams.type = [];
        }else{
            this.queryParams.type=value;
        }
      this.getList();
    },
    XDdateItem(index) {

      // this.active1 = index;
      // this.queryParams.timeFlag = "";
      // if (item == "全部") {
      //   this.queryParams.timeFlag = "";
      // } else {
      //   this.queryParams.timeFlag = index;
      // }
        if(index==0){
            this.queryParams.timeFlag = "";
        }else{
            this.queryParams.timeFlag = index;
        }

      this.getList();
    },
  },
};
</script>

<style lang="scss" scoped>
  .JNPF-common-layout {
    height: 100%;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    height: calc(100vh - 84px);
    background: #f7f9fb;
    .JNPF-common-layout-center {
      -webkit-box-flex: 1;
      -ms-flex: 1;
      flex: 1;
      height: 100%;
      overflow: hidden;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      padding: 20px;

      .JNPF-common-search-box {
        background: #fff;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        margin-bottom: 16px;
        padding: 15px 21px 0;
        border-radius: 4px;
      }
      .JNPF-flex-main{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        border-radius: 4px;
      }
      .JNPF-common-layout-main {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        background-color: #fff;
        height: 100%;
        overflow: hidden;
      }
      .JNPF-flex-main .el-table {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
      }
    }
  }
  .tableContainer {
    -webkit-box-flex: 1;
    -ms-flex: 1 0 0px;
    flex: 1 0 0;
    height: 100%;
    overflow: hidden;
    padding:24px 21px 2px;
  }
  .pagination-container{
    /*background: #fff;*/
    text-align: right;
    overflow: auto hidden;
    margin-top: 10px;
    padding-right: 10px;
    height:50px;
  }
.titleName{
  text-align: center;
  font-size: 23px;
  padding:20px 0;
  font-weight:600;
}
.rowState {
  display: flex;
  height: 48px;
  line-height: 48px;
  background: #fff;
  margin-bottom: 20px;
  cursor: pointer;
  .rowStateItem {
    display: flex;
    align-items: center;
  }
}
.activeColor {
  // width: 142px;
  height: 34px;
  text-align: center;
  font-size: 14px;
  line-height: 34px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #59709d;
  padding: 0 20px;
}
.activeColorActive {
  background: #3d78fc;
  border-radius: 12px;
  // width: 142px;
  height: 34px;
  line-height: 34px;
  text-align: center;
  padding: 0 20px;
  color: #fff;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
}
::v-deep .el-pagination{
  right:100px;
}
</style>

